<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>周末作业</title>
</head>

<body>
    <!--
    7. 输入身份证号，点击按钮，显示出生年月，输出格式为："出生年月：xxxx年xx月xx日"
  > 提示：
  - 获取元素：document.querySelector(CSS选择器);
  - 点击事件：el.onclick = function(){};
  - 获取输入框的值：el.value;
  - 设置元素显示内容：el.textContent = "";
  
  8. 用户信息脱敏。一个表单包含三个输入字段，姓名，电话码号，邮箱。输入完成以后，点击脱敏按钮在表单后面生成用户信息脱敏以后的信息。
    要求：
    - 姓名第二个字用*覆盖
    - 电话号码中间四位用*覆盖，电话号码输入支持全数字和-连接方式，如189-1234-1234/18912341234都合法。
    - 邮箱@前面的所有内容*覆盖，且*个数和@前的字符串长度相等。
    - 在输入信息的前后有空格会被系统默认删除

    例如用户输，姓名：李大锤，电话号码：189-1234-1234，邮箱：pony@qq.com。
    脱敏输出，姓名：李*锤，电话号码：189****1234，邮箱：****@qq.com
    -->
    <div>
        <input type="text" id="id-cn">
        <button class="btn">显示生日</button>
        <p class="text"></p>
    </div>
    <div>
        <label for="username">姓名：</label><input type="text" id="username"><br>
        <label for="tel">电话：</label><input type="text" id="tel"><br>
        <label for="email">邮箱：</label><input type="text" id="email"><br>
        <button class="btn1">脱敏</button>
        <p class="msg"></p>
    </div>
    <script>
        var ipt = document.getElementById('id-cn')
        var btn = document.querySelector('.btn')
        var textEle = document.querySelector('.text')

        btn.onclick = function () {
            var value = ipt.value
            var year = value.slice(6, 10)
            var month = value.slice(10, 12)
            var day = value.slice(12, 14)
            var birthday = `出生年月：${year}年${month}月${day}日`
            textEle.innerText = birthday
        }

        var usernameIpt = document.getElementById('username')
        var telIpt = document.getElementById('tel')
        var emailIpt = document.getElementById('email')
        var tmBtn = document.querySelector('.btn1')
        var msgEle = document.querySelector('.msg')

        function tm(name, tel, email) {
            var tmName = name.replace(name[1], '*')
            var tmTel = tel.slice(0, 4) + '****' + tel.slice(8)


            //i代表@的索引
            var i = email.indexOf('@')
            var tmEmail = mulStr('*', i) + email.slice(i)
            return `姓名：${tmName}，电话号码：${tmTel}，邮箱：${tmEmail}`
        }

        function mulStr(char, n = 1) {
            var str = ''
            for (var i = 1; i <= n; i++) {
                str += char
            }
            return str
        }


        tmBtn.onclick = function () {
            var tmMsg = tm(usernameIpt.value, telIpt.value, emailIpt.value)
            msgEle.innerText = tmMsg
            
        }

    </script>

</body>

</html>